<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" href="../module/css/global.css" />
	<title>线上校园答疑平台-课程</title>
</head>
<body>	
	<div class="nk-container">
		<!-- 头部 -->
		<header class="bg-dark sticky-top">
			<div class="container">
				<!-- 导航 -->
				<nav class="navbar navbar-expand-lg navbar-dark" id="nav">
				</nav>
			</div>
		</header>

		<!-- 内容 -->
		<div class="main">
			<div class="container">
				<!-- 课程列表 -->
				<ul class="list-unstyled course-list" id="course">
					<li class="course">
						<div class="course-div">
							<p class="course-title">java</p>
							<div class="course-img">
								<img src="../module/img/English.jpg" height="200" width="200"/>
							</div>
							<div class="detail">
								<a href="">课程详情</a>
							</div>
							<a href="" class="choice">选择课程</a>
							<span class="teacher">代课老师：小刚</span>
						</div>
					</li>

				</ul>

				<!-- 分页 -->
				<nav class="mt-5" th:if="${page.rows>0}" th:fragment="pagination">
					<ul class="pagination justify-content-center">
						<li class="page-item">
							<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
						</li>
						<li th:class="|page-item ${page.current==1?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a></li>
						<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
							<a class="page-link" href="#" th:text="${i}">1</a>
						</li>
						<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
						</li>
						<li class="page-item">
							<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<!-- 尾部 -->
		<footer class="bg-dark">
			<div class="container" id="footer">

			</div>
		</footer>
	</div>

	<script src="../module/js/jquery-3.3.1.js"></script>
	<script src="../module/js/popper.min.js"></script>
	<script src="../module/js/bootstrap.min.js"></script>
	<script src="../module/js/global.js"></script>
	<script src="../module/js/header.js"></script>
	<script>
		$(function () {
			getAllCourses();
		})

		function f() {

		}
		// 一页的个数
		var page = 6;

		function getAllCourses() {
			let params = {
				limit:page,
				page:1
			}
			let result = jsonPost("api-course/course/getSelectCourses", params);
			console.log(result);
			setAllCoursesData(result.data);
		}

		function setAllCoursesData(data) {
			let html = "";
			for (let i=0; i<data.length;i++) {
				html += '<li class="course">\n' +
						'<div class="course-div">\n' +
						'<p class="course-title">'+ data[i].title +'</p>\n' +
						'<div class="course-img">\n' +
						'<img src="'+ data[i].courseImgUrl+ '" height="200" width="200"/>\n' +
						'</div>\n' +
						'<div class="detail">\n' +
						'<div onclick="setCourseId('+ data[i].id +')">课程详情</div>\n' +
						'<p class="courseType">\n' +
						'<span>课程类型:</span>\n' +
						'<span>'+data[i].courseTypeName +'</span>\n' +
						'</p>' +
						'</div>\n' +
						'<span class="choice" onclick="choiceCourse('+ data[i].id + ',' + data[i].courseType + ')">选择课程</span>\n' +
						'<span class="teacher">代课老师:'+ data[i].teacherName+'</span>\n' +
						'</div></li>';
				$("#course").html(html)
			}
		}
		function setCourseId(id){
			sessionStorage.setItem("courseId",id);
			window.location.href = "/pages/course-detail.html";
		}
	</script>
</body>
</html>
